<template>
  <div class="w_h_100">
    <div class="box">
      <div class="inlet">系统管理 > 消息模版 > <span class="size">消息模版列表</span></div>
      <myform :fields="fields" :model="values" class="m_t_10" :options="options">
        <template v-slot:button>
          <el-button @click="resetting">重置</el-button>
          <el-button type="primary" :icon="Search" @click="searchFor">搜索</el-button>
        </template>
      </myform>
    </div>
    <div class="mytable m_t_10 ">
      <div class="d_f j_c_s_b a_i_c">
        <h4>消息模版列表</h4>
        <!-- <el-button type="primary" :icon="Plus" @click="addFile" v-hasPerm="'addMessage'">新增模版</el-button> -->
      </div>
      <mytable :fields="tableFields" width="150" ref="tableRef" :values="values" api="msgTemplateListByPage" class="m_t_10"
        :isSelection="false">
        <template v-slot:deleted="{ row }">{{ row.deleted == 0 ? '已启用' : '已停用' }}</template>
        <template v-slot:operation="{ row }">
          <div class="d_f j_c_s_b">
            <span class="edit" @click="edit(row)" v-hasPerm="'editMessage'">编辑</span>
            <span class="success" @click="modifyState(row.id, 0, '是否启用当前模版?')" v-if="row.deleted == 1" v-hasPerm="'statusMessage'">启用</span>
            <span class="error" @click="modifyState(row.id, 1, '是否停用当前模版?')" v-else v-hasPerm="'statusMessage'">停用</span>
          </div>
        </template>
      </mytable>
    </div>
    <el-drawer v-model="show" :title="title" size="550px" direction="rtl" :before-close="handleClose">
      <div class="myform">
        <myform :fields="addFields" :options="options" ref="ruleFrom" :model="model" :inline="false" labelPosition="top" :rules="rules"
          class="m_t_16">
          <template v-slot:emp>
            <span class="select" v-if="model.empList.length>0">已选<span class="color">（{{model.empList.length}}）</span> <span class="color" @click="cancellation">取消</span> </span>
            <mytable :fields="formTbaleFields" ref="userTable" @selecSelection="selecSelection" :isSelection="true" :serial="false" :handle="false" api="empListByPage" class="m_t_16">
      </mytable>
          </template>
        </myform>
      </div>
      <div class="d_f j_c_c">
        <el-button type="primary" @click="save" v-myRepeat>保存</el-button>
        <el-button @click="handleClose">取消</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs, onMounted, ref } from 'vue'
import { Search, Plus } from '@element-plus/icons-vue'
import { messageType } from '../../../type/system'
import { copy, objectMatching} from '../../../utils/date'
import { ElMessageBox } from 'element-plus'
import { Message } from '../../../utils/resetMessage'
import {msgTemplateAdd,msgTemplateUpdate,msgTemplateStatus} from '../../../api/system/message'
import {dictDetail} from '../../../api/login'
const values = {
  name: '',
}
const model = {
   id:0,
   name:'',//模版名称
   sendTime:'',//发送时间
   content:'',//消息模版内容
   notifyCategory:'',//通知类型
   empList:[],//消息模板绑定的对象
   emp:'',
}
export default defineComponent({
  name: '',
  setup() {
    const data: messageType = reactive({
      fields: [
        {
          label: "模版名称",
          prop: 'name',
          placeholder: '请输入',
          type: 'input',
          labelWidth:'70px'
        },
        {
          prop: 'button'
        }
      ],
      values: copy(values),
      options: {
        notifyCategory: [],
      },
      tableFields: [
        {
          label: '模版名称',
          prop: 'name',
        },
        {
          label: '通知类型',
          prop: 'notifyCategoryName',
        },
        {
          label: '内容',
          prop: 'content',
        },
        {
          label: '创建时间',
          prop: 'createdTime',
        },
      ],
      model: copy(model),
      rules: {
        name: [
          { required: true, message: '请输入模版名称', trigger: 'blur' },
        ],
        // sendTime: [
        //   { required: true, message: '请选择发送时间', trigger: 'change' },
        // ],
        content: [
          { required: true, message: '请输入模版内容', trigger: 'blur' },
        ],
        // emp: [
        //   { required: true, message: '请选择发送对象', trigger: 'blur' },
        // ],
      },
      addFields: [
        {
          label: '模版名称',
          type: 'input',
          placeholder: '请输入',
          prop: 'name'
        },
        // {
        //   label: '发送时间',
        //   type: 'datetime',
        //   placeholder: '请选择时间',
        //   prop: 'sendTime'
        // },
        {
          label: '模版内容',
          type: 'textarea',
          placeholder: '请输入',
          prop: 'content',
          row:5
        },
        {
          label: '通知类型',
          prop: 'notifyCategory',
          placeholder: '请选择',
          type: 'select',
          bindLabel: 'name',
          bindValue: 'id',
          disabled:true,
        },
        // {
        //   prop: 'emp',
        //   label: '发送对象'
        // },
      ],
      show: false,
      title: "新增模版",
      formTbaleFields:[
        {
         label:'姓名',
         prop:'name'
        },
        {
          label:'邮箱',
         prop:'email'
        },
      ],
    })
    onMounted(() => {
      methods.getDict()
    })
    const tableRef = ref()
    const ruleFrom = ref()
    const userTable=ref()
    const methods = {
      getDict(){
        dictDetail({id:'NOTICE_TYPE'}).then((res:any)=>{
            data.options.notifyCategory=res
        })
      },
      //表格数据重置
      resetting() {
        data.values =  copy(values)
         tableRef.value.resettingTable(data.values)
      },
      //列表根据筛选条件搜索
      searchFor() {
        tableRef.value.handleCurrentChange(1)
      },
      //新增模版
      addFile() {
        data.title = '新增消息模版'
        data.show = true
      },
      edit(row: any) {
        data.title = '修改消息模版'
       
      data.model=objectMatching(row,data.model)
      // data.model.empList=row.msgUserList.map((item:any)=>{
      //   return {empId:item.empId,name:item.name,email:item.email}
      //  })
   
      data.show=true
      // setTimeout(()=>{
      //   userTable.value.echo(row.msgUserList) 
      //   data.model.emp='123'
      // },1500)
      },
      //文件模版启用跟停用
      modifyState(id: number, status: number, val: string) {
        ElMessageBox.confirm(
          val,
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
        )
          .then(() => {
            msgTemplateStatus({id:id,status:status}).then(()=>{
              Message({type:'success',message:'操作成功'})
              tableRef.value.handleCurrentChange(1)//添加表格之后重新获取表格
            })
          })
      },
      //关闭弹窗
      handleClose() {
        ElMessageBox.confirm(
          '当前信息将不再保存?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
        )
          .then(() => {
            // userTable.value.clearSelection();
            ruleFrom.value.resetFields()//重置表单
            data.show = false
            data.model = copy(model)
           
          })
      },
       //添加文件模版保存按钮事件
       save(){
        ruleFrom.value.verification().then(()=>{
          if(!data.model.id){
            msgTemplateAdd(data.model).then(()=>{
              Message({type:'success',message:'添加成功'})
              // userTable.value.clearSelection();
              tableRef.value.handleCurrentChange(1)//添加表格之后重新获取表格
              data.show=false//关闭弹窗
              ruleFrom.value.resetFields()//重置表单
              data.model=copy(model)//重置表单绑定数据
            })
          }else{
            msgTemplateUpdate(data.model).then(()=>{
              Message({type:'success',message:'修改成功'})
              // userTable.value.clearSelection();
              tableRef.value.handleCurrentChange(1)//添加表格之后重新获取表格
              data.show=false//关闭弹窗
              ruleFrom.value.resetFields()//重置表单
              data.model=copy(model)//重置表单绑定数据
            })
          }
        })
      },
      selecSelection(selection:any){
       data.model.empList=selection.map((item:any)=>{
        return {empId:item.id,name:item.name,email:item.email}
       })
       if(data.model.empList.length>0){
         data.model.emp='123'
       }else{
        data.model.emp=''
       }
      },
      cancellation(){
        userTable.value.clearSelection();
        data.model.empList=[]
      }
    }
    return {
      ...toRefs(data),
      Search, Plus, ...methods,
      tableRef, ruleFrom,userTable
    }
  }
})
</script>
<style scoped lang='scss'>
.box {
  width: calc(100% - 64px);
  background: #fff;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  height: 70px;
  padding: 10px 32px;
  margin-top: 10px;
}

.mytable {
  overflow-y: auto;
  width: calc(100% - 64px);
  background: #fff;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  padding: 10px 32px;
  height: calc(100% - 125px);
}
.select{
  position: absolute;
  right: 0px;
  top: -35px;
}
.color{
  color: #1878FF;
  cursor: pointer;
}
</style>
<style lang="scss">
.myform {
  height: calc(100% - 70px);
  overflow-y: auto;
  .el-input,.el-select {
    width: 100% !important;
  }
  .el-form-item{
    position: relative;
  }
  .el-pagination__sizes{
    width: 100px;
  }
}
</style>